<?php if($this->product):?>
	<link media="all" type="text/css" href="<?php echo $this->APP_STATIC_SERVER; ?>/js/jquery.ui/themes/base/ui.core.css" rel="stylesheet">				
	<link media="all" type="text/css" href="<?php echo $this->APP_STATIC_SERVER; ?>/js/jquery.ui/themes/base/ui.resizable.css" rel="stylesheet">		
	<link media="all" type="text/css" href="<?php echo $this->APP_STATIC_SERVER; ?>/js/jquery.ui/themes/base/ui.dialog.css" rel="stylesheet">
	<link media="all" type="text/css" href="<?php echo $this->APP_STATIC_SERVER; ?>/js/jquery.ui/themes/base/ui.theme.css" rel="stylesheet">
	
	<script language="JavaScript" type="text/JavaScript" src="<?php echo $this->APP_STATIC_SERVER; ?>/js/jquery.ui/ui.core.js"></script>		
	<script language="JavaScript" type="text/JavaScript" src="<?php echo $this->APP_STATIC_SERVER; ?>/js/jquery.ui/ui.draggable.js"></script>		
	<script language="JavaScript" type="text/JavaScript" src="<?php echo $this->APP_STATIC_SERVER; ?>/js/jquery.ui/ui.resizable.js"></script>
	<script language="JavaScript" type="text/JavaScript" src="<?php echo $this->APP_STATIC_SERVER; ?>/js/jquery.ui/ui.dialog.js"></script>		
	<div id="dialogLength" style="display:none;">
		<table>
			<tr>
				<td style="color:black;"><?php echo $this->translator('product_bundle_product_max_amount');?>&nbsp;&nbsp;</td>
				<td id="selectLengthContainer">
				</td>
			</tr>
		</table>
	</div>
    <span><?php echo $this->translator('dashboard_list_product'); ?>:</span><br/>
	<div>
		<?php 	
			$str='';
			$rows = 0;
			$arrProID = array();
			if(count($this->arrName)){
				$rows = count($this->arrName);
					foreach($this->arrName as $item){
						$str.='<li id="_proID_'.$item['id'].'">'.$item['product_name'] . ' ('. $item['count'] .')</li>';
						$arrProID[] = $item['id'];
					}
			}else
				$str.='<li class="emptyBundle">'. $this->translator('non_product_bundle') . '</li>';
		?>
		<style>
			.listProductName{
				background: none repeat scroll 0 0 white;
				color: black;	
			}
			.listProductName li{
				padding-bottom: 5px;
				border-bottom: 1px solid #CCCCCC;
			}			
		</style>
		<ul name="products_name" id="products_name" class="listProductName">
			<?php echo $str;?>
		</ul>		
		<input type="hidden" value="<?php if(isset($this->product_product_id_chain)){echo $this->product_product_id_chain;} else {echo ',';}?>" readonly="readonly" id="product_product_id_chain" name="product_product_id_chain"/>
		<span style="float:left;">	
			<a class="t_a_link tOpenEditAction" href="javascript:void(0);"><?php echo $this->translator('product_bundle_edit'); ?></a><br />
		</span>
		<br/>
	</div>
    <div id="html_list_products" style="display: <?php if(isset($this->str_product_name) && $this->str_product_name == ','){?>block<?php }else{?>none<?php }?>;">
        <div style="width: 400px; height: 120px; overflow: auto; padding: 5px; border: 1px solid #CCC;">					
			<table width="100%">
				<tr>
					<th>&nbsp;</th>
					<th align="left"><?php echo $this->translator("product_bundle_product_name");?></th>
					<th align="left" width="80"><?php echo $this->translator("product_bundle_product_max_amount");?></th>
				</tr>
				<?php foreach($this->product as $rowProduct):?>
				<?php 
					$product_status_of_delivery = $rowProduct->product_status_of_delivery;
					$product_quantity           = $rowProduct->product_quantity;
					$product_quantity_mode		= $rowProduct->product_quantity_mode;
				?> 
				<tr>
					<td>
						<input	onclick="add2Product('product_choice_<?php echo $rowProduct->product_id;?>');"
								id="product_choice_<?php echo $rowProduct->product_id;?>"
								name="product_choice_<?php echo $rowProduct->product_id;?>" 
								type="checkbox"
								value="<?php echo $rowProduct->product_id;?>"
								title="<?php echo $rowProduct->product_admin_name;?>"
								lang="choose"
								rel="<?php if(is_numeric($product_quantity)) echo "amount_".$product_quantity; else echo "infinity";?>"
								<?php if(in_array($rowProduct->product_id,$arrProID)):?>checked="checked"<?php endif;?>
								rel="<?php $rowProduct->product_id?>"></input>					
					</td>		
					<td>
						<?php echo $rowProduct->product_admin_name;?> 						
					</td>
					<td>
						<?php 
								if(is_numeric($product_quantity))
									echo $product_quantity;
								else
									echo $this->translator("product_quantity_mode_infinity");
						?>
					</td>
				</tr>
				<?php endforeach;?>
			</table>            
        </div>
        <a class="t_a_link tCloseEditAction" href="javascript:void(0);"><?php echo $this->translator('product_bundle_cancel'); ?></a><br />
    </div>
	<script language="javascript">

	var temp = '<li class="emptyBundle"><?php echo $this->translator('non_product_bundle')?></li>';
	var temp1= '<?php echo implode(',',$arrProID);?>';

	$("a.tOpenEditAction").click(function(){
		$("#html_list_products").show();
		temp  = $("#products_name").html();
	});

	$("a.tCloseEditAction").click(function(){
		$("#html_list_products").hide();
		if(temp){
			$("#products_name").html(temp);
			$("#product_product_id_chain")[0].value = '<?php echo $this->product_product_id_chain;?>';
		}
		$("#html_list_products").find("input[type='checkbox']").attr("checked",false);
		if(temp1){
			arrProID = temp1.split(",");
			for(var i=0;i<arrProID.length;i++){
				$("#product_choice_"+arrProID[i]).attr("checked",true);	
			}		
		}
	});
	function processDialog(dialog,id,rel){
		var length = $("#selectLength").val() * 1;
		var ok = false;
		if(length >= 1){		
			if(rel== "infinity") ok= true;
			else{
				rel =  rel.replace("amount_","");
				rel*=1;
				if(rel >= length) ok= true;				
			}
			if(ok){
				$(".emptyBundle").remove();
				var html = '<li id="_proID_' + $("#"+id).val() + '">' + $("#"+id).attr('title') + '('+ length +  ')</li>';		
				$("#products_name").append(html);
				for(i=0; i < parseInt(length); i++)
					$("#product_product_id_chain")[0].value += $("#"+id)[0].value + ',';
			}
		}
		if(ok== false)
			document.getElementById(id).checked = false;			
		$(dialog).dialog('destroy');                       
	}
	function dialogLength(id,rel){
		$("#dialogLength").dialog({
			title: '<?php echo $this->translator('product_bundle_product_max_amount');?>',
			dialogClass: 't_a_ui_dialog',
			position: 'center',
			modal: true,
			closeOnEscape: false,
			resizable: false,
			width: 250,
			height: 100,					
			close: function(event, ui) {
				$("#selectLength").val("0");
				processDialog(this,id,rel);
			},
			open: function(event, ui){
				$(".ui-dialog-buttonpane").find("button").each(function(){
					var txt = $(this).html();
					$(this).html("<span>"+txt+"</span>");
					$(this).parent(".ui-dialog-buttonpane")
						   .removeClass("ui-dialog-buttonpane")
						   .css("padding","5px");
					$(this).css("float","right");
				});
			},
			buttons: { 
				"OK": function() { 
					processDialog(this,id,rel);
				}
			}
		});
	}
	function add2Product(id)
	{
		var myString = $("#products_name")[0].value;
		if(document.getElementById(id).checked == true)
		{
			var rel  = $("#"+id).attr("rel");
			var html = "<input type='text' id='selectLength' value=''>";		
			$("#selectLengthContainer").html(html);
			dialogLength(id,rel);
		}
		else
		{
			$(".emptyBundle").remove();
			$("#_proID_"+$("#"+id).val()).remove();
			document.getElementById("product_product_id_chain").value = replaceAll(document.getElementById("product_product_id_chain").value,$("#"+id)[0].value + ',','');
		}
	};

	function replaceAll( str, from, to ) {
		var idx = str.indexOf( from );

		while ( idx > -1 ) {
			str = str.replace( from, to );
			idx = str.indexOf( from );
		}

		return str;
	};
	</script>	
<?php else:?>
    <div id="html_list_products">
        <div style="width: 300px; height: 120px; overflow: auto; padding: 5px; border: 1px solid #CCC;">
            <?php echo $this->translator('not_found_any_product');?>
        </div>
    </div>
<?php endif;?>